<template>
    <div class="box">
        <h3>错误信息的展示</h3>
        <p> 1、系统控制台（cmd）：编译时出现的错误和和运行时出现的错误（多数都会被映射到HTML页面上）</p>
        <ul>
            <li>
                程序启动的编译错误【vue模块化项目未正常启动】
                <img src="../../assets/04.png" alt="" srcset="">
            </li>
            <li>
                程序启动正常，也可以正常运行，但开发时出现代码错误【多数都会映射在浏览器窗口中】
                <img src="../../assets/05.png" alt="" srcset="">
            </li>
        </ul>
        <p> 2、服务器的HTML页面 ：编译时出现的错误和程序运行时的其它错误【优先解决】</p>
        <img src="../../assets/06.png" alt="" srcset="">
        <p> 3、运行过程中出错，浏览器的控制台【累加错误-vue模块项目为SPA-页面不刷新】</p>
        <ul>
            <li>
                编译错误的JS二次映射【这类错误不用关心，直接基于上述两种情况进行解决】
                <img src="../../assets/07.png" alt="" srcset="">
            </li>
            <li>
                程序业务逻辑错误【vue模块化环境运行正常，但vue的功能业务开发出现问题】
                <div>msg:{{ msg }}</div>
                <img src="../../assets/08.png" alt="" srcset="">
                <input type="button" value="printInfo()" @click="printInfo()">
                <img src="../../assets/09.png" alt="" srcset="">
            </li>
        </ul>
    </div>
</template>

<script>
// asdasdasd
export default {
    data() {
        return {
            msg:"msg",
            user: null
        }
    },
    methods: {
        printInfo() {
            console.log(this.user.age);
        }
    },
}
</script>

<style scoped>
.box{
    padding: 10px;
}
img{
    width: 700px;
    display: block;
}
</style>